<template>
  <div>
    <basic-container>
      <div class="detailsBox">

        <div class="line"></div>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">所属游戏：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.gameName}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">账号：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.account}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">区服：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.serverName}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">角色：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.roleName}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">角色id：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.roleId}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">当前等级：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.roleLevel}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">充值次数：</span>
          </el-col>
          <el-col span="8">
            <span v-if="money.length!=''">
            <span>{{money.count}}</span></span>
            <span v-else><span class="skucost-pruice"></span>0</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">充值总额：</span>
          </el-col>
          <el-col span="8">
            <span v-if="money.length!=''">
            <span>{{ (Number(money.total)/100).toFixed(2) }}</span>
            </span>
            <span v-else><span class="skucost-pruice"></span>0.00</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">今日充值：</span>
          </el-col>
          <el-col span="8">
            <span v-if="money.length!=''"><span
              class="skucost-pruice">{{ (Number(money.todaytotal)/100).toFixed(2) }}</span></span>
            <span v-else><span class="skucost-pruice"></span>0.00</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">未登录天数：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.diffDate}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">手机号：</span>
          </el-col>
          <el-col span="8">
            <span>{{money.phone}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">设备型号：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.device}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">推广商账号：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.promoteMangerName || "无" }} </span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">组长账号：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.paccount || "无" }}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">推广员账号：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.userAccount|| "无" }}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">账号创建时间：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.createTime}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col span="8"></el-col>
          <el-col span="4">
            <span class="el-lab">最后登录时间：</span>
          </el-col>
          <el-col span="8">
            <span>{{row.updateTime}}</span>
          </el-col>
          <el-col span="4"></el-col>
        </el-row>
      </div>

    </basic-container>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {selectSpendRoleId} from "@/api/system/details";

export default {
  name: "index",
  data() {
    return {
      money:{}
    };

  },
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  components: {
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },

  created() {
    var formInline = {
      roleId:this.row.roleId,
      gameId:this.row.gameId,
    }
    selectSpendRoleId(Object.assign(formInline)).then(res => {
      console.log("res",res)
      // this.$nextTick()
      this.money = res.data;
    });
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.nowload();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.nowload();
    },
  },

}
</script>

<style scoped lang="scss">
.detailsBox{
  background: #FFFFFF;

}
.detailsBoxtwo{
  background: #FFFFFF;

}
.headertitle{
  font-size: 18px;
  color: #303133;
}
.line{
  margin-top: 10px;
  height: 1px;
  width: 100%;
  background: #E5EAF3;
}
.el-lab {
  display: inline-block;
  text-align: right;
  width: 100px;
  font-size: 14px;
  color: #76838f;
}
</style>
